<template>
	<view class="video-component-content">
		<view class="video-component-video" v-if="src">
			<video :id="src" :style="{width: videoWidth2px,height: videoHeight2px}" :src="src" controls @play="vedioPlay()"
			 @ended="vedioEnded()"></video>
		</view>
		<view v-else class="cus-video-add" @click="chooseVideo()">
			<text class="def-icon" style="font-size: 110upx;color:#D9D9D9">&#xe620;</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoContext: null
			}
		},
		props: {
			src: {
				type: String,
				default: ""
			},
			width: {
				type: Number,
				default: () => 200
			},
			height: {
				type: String,
				default: () => 200
			}
		},

		computed: {
			videoWidth2px() {
				return uni.upx2px(this.width) + 'px';
			},
			videoHeight2px() {
				return uni.upx2px(this.height) + 'px';
			},
		},
		onReady() {
			// this.videoContext = uni.createVideoContext(this.src)
		},

		methods: {
			vedioPlay() { // 视频开始播放
				this.videoContext = uni.createVideoContext(this.src)
				this.videoContext.requestFullScreen()
			},

			vedioEnded() { // 视频结束播放
				this.videoContext.exitFullScreen()
			},

			chooseVideo() { // 选择视频
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res) => {
						uni.uploadFile({ // 上传视频
							url: this.$store.state.baseUrl + '/lwj/tencent_vod_upload',
							filePath: res.tempFilePath,
							name: 'file',
							header: {
								token: this.$store.state.token
							},
							success: (uploadFileRes) => {
								const parseObj = JSON.parse(uploadFileRes.data) // 解析为json格式
								if (parseObj.code === 1) {
									this.$emit('success', parseObj.data.url[0]) // 上传成功将 路径抛出
								}
							},
							fail: () => {
								uni.showToast({
									icon: 'none',
									title: '视频时长超过 最长时间',
									duration: 3000
								})
							}
						});
					},
					// fail: (err) => {
					// 	uni.showToast({
					// 		title: '该手机暂不支持此操作，请移步到微信小程序',
					// 		icon: 'none',
					// 		duration: 3000
					// 	});
					// }
				});
			},
		},
	}
</script>

<style>
	.cus-video-add {
		width: 180upx;
		height: 180upx;
		border: 2upx solid #D9D9D9;
		text-align: center;
		padding: 10upx;
		margin-top: 10upx;
	}

	.video-component-content {
		margin-top: 16upx;
	}

	.video-component-video {
		padding: 10upx;
	}
</style>
